<template>
	<view class="container">
		<!-- Top Section -->
		<view class="top-section">
			<view class="top-title">
				<text class="app-name">付加加</text>
				<view class="top-icons">
					<button class="share-button">微信分享</button>
				</view>
			</view>
			<view class="search-bar-box">
				<input class="search-bar" placeholder="请输入商家名称搜索" />
			</view>
		</view>

		<!-- Banner Section -->

		<my-home-slide v-if="slides.length" :isHome="'isHome'" :slides="slides" :height="'400rpx'"
			:mode="'scaleToFill'"></my-home-slide>


		<!-- <my-home-menus v-if="cateory.length" :cateory="cateory"></my-home-menus> -->

		<!-- Service Grid -->
		<view class="service-grid">
			<view class="service-item" @tap="goMenu(item.id)" v-for="(item, index) in cateory" :key="index">
				<image :src="item.thumb" class="service-icon"></image>
				<!-- <text class="service-text">{{ item.name }}</text> -->
			</view>
		</view>

		<!-- Recommendations Section -->
		<view class="recommendation-section">
			<view class="recommendation-title">
				<image mode="widthFix" src="/static/user/hot.png"></image>
			</view>
			<view class="recommendation-cards">
				<view class="recommendation-card">
					<image src="/static/user/recommend-1.png"></image>
				</view>
				<view class="recommendation-card">
					<image src="/static/user/recommend-2.png"></image>
				</view>
				<view class="recommendation-card">
					<image src="/static/user/recommend-3.png"></image>
				</view>
				<view class="recommendation-card">
					<image src="/static/user/recommend-4.png"></image>
				</view>
			</view>
		</view>

		<!-- Upgrade Section -->
		<view class="upgrade-section">

			<navigator url="/pages/goods/details?id=1" open-type="navigate">
				<image class="upgrade-image" src="/static/user/199.png" mode="widthFix"></image>
			</navigator>

		</view>


		<!-- Partner Section -->
		<view class="partner-section">
			<view class="partner-item" @tap="goNav(partner.url)" v-for="(partner, index) in taokeList" :key="index">
				<image :src="partner.thumb" mode="aspectFill" class="partner-icon"></image>
			</view>
		</view>
		<!-- {{taokeList}} -->
		<!-- <taoke-list :taokeList="taokeList"></taoke-list> -->
		

		<view class="bg-bottom">
			<view class="free-section">
				<image class="upgrade-image" src="/static/user/free.png" />
			</view>

			<view class="partner-section-goods">
				<!-- 左侧列 -->
				<view class="column left-column">
					<image class="partner-icon" @click="onSkip(good.id)" v-for="(good, index) in goodsList"
						:key="'left-' + index" v-if="index < 2" mode="aspectFill"
						:src="'https://cos.yycjkb.cn/' + good.image"></image>
				</view>

				<!-- 中间列 -->
				<view class="column center-column" @click="onSkip(goodsList[2].id)" v-if="goodsList.length > 2">
					<image class="partner-icon" mode="aspectFill" :src="'https://cos.yycjkb.cn/' + goodsList[2].image">
					</image>
				</view>

				<!-- 右侧列 -->
				<view class="column right-column" @click="onSkip(goodsList[3].id)" v-if="goodsList.length > 3">
					<image class="partner-icon" mode="aspectFill" :src="'https://cos.yycjkb.cn/' + goodsList[3].image">
					</image>
				</view>
			</view>





			<!-- Online Free Section -->
			<view class="online-free-section">
				<!-- <text class="online-title">线上全网免单</text> -->
				<view class="card-grid">
					<view class="card" @tap="switchTab(0)">

						<image src="/static/user/nearby.png"></image>
					</view>
					<view class="card" @tap="switchTab(1)">

						<image src="/static/user/recommend.png"></image>
					</view>
					<view class="card" @tap="switchTab(2)">

						<image src="/static/user/new.png"></image>
					</view>
				</view>
			</view>

			<!-- Store List -->
			<!-- {{shops}} -->
			<view class="store-list">

				<view class="store-item" v-for="(store, index) in shops" :key="index">
					<!-- {{store}} -->
					<view class="store-image" @tap="toShop(store.id)">
						<image :src="store.logo"></image>
					</view>
					<view class="store-details" @tap="toShop(store.id)">
						<text class="store-name">{{ store.short_name }}</text>
						<text class="store-info">电话: {{ store.tel }}</text>
						<text class="store-info">距离: {{ store.distance }}</text>
					</view>
					<button class="navigate-button" @tap="goMap(store)">导航</button>
				</view>
			</view>
		</view>
		<template v-if="userInfo.id>0 && money>0">
			<gcm-red-bag :money="money" :options="redBagConfig" @onConfirm="onConfirm" @onClose="onClose"
				@onCover="onCover"></gcm-red-bag>
		</template>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import api from "@/api/";
	import user from "@/api/user";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import MyHomeHeader from "@/components/MyHomeHeader";
	import MyHomeSlide from "@/components/MyHomeSlide";
	import MyHomeMenus from "@/components/MyHomeMenus";
	import MyTaokeMenus from "@/components/MyTaokeMenus";
	import MyShops from "@/components/MyShops";
	// import TaokeList from "@/components/TaokeList";
	import {
		Base64
	} from "@/common/base64.js"
	export default {
		data() {
			return {
				money: 0,
				redBagConfig: {
					btnText: "确认收款",
				},
				taokeList: new Array(10).fill({}),
				slides: [{
					thumb: '../../../static/default.png'
				}],
				cateory: new Array(10).fill({}),
				sortType: 0,
				shops: [],
				page: 1,
				more: 'more',
				flag: false,
				locationRes: {
					longitude: 0,
					latitude: 0,
				},
				navList: [],
				goodsList: []
			};
		},
		computed: {
			...mapState(['userLocation', 'userInfo', 'hasLogin']),
		},
		components: {
			MyHomeHeader,
			MyHomeSlide,
			MyHomeMenus,
			MyTaokeMenus,
			MyShops,
			uniLoadMore,
			// TaokeList
		},
		onLoad(params) {
			if (params.cid) {
				this.$store.commit('setInviteCode', params.cid);
			}
			// console.log(this.$store.state.inviteCode);
			this.loadIndex();
			this.getCateory();
			this.getTaoke();
			this.getShops();
			this.loadNav();
			this.getDistribute()
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.getShops();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		methods: {
			goMenu(cid) {
				uni.navigateTo({
					url: `/pages/home/list?cid=${cid}`
				})
			},
			goNav(url) {
				// #ifdef H5
				location.href = url
				// #endif

				// #ifdef APP-PLUS

				plus.runtime.openUrl(url)

				// #endif

				// uni.navigateTo({
				// 	url: `/pages/home/list?cid=${cid}`
				// })
			},
			async goMap(shops) {
				if (!shops.lat || !shops.lng) {
					return this.toast('商家暂未设置导航');
				}
				const [err, res] = await uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: parseFloat(shops.lat), //要去的纬度-地址
					longitude: parseFloat(shops.lng), //要去的经度-地址
					name: shops.short_name || shops.title,
					address: shops.address
				})
				if (err) {
					this.toast(err.errMsg)
				}
			},
			toShop(id) {
				uni.navigateTo({
					url: '/pages/home/detail?id=' + id
				})
			},
			// 点击确认红包按钮事件
			onConfirm() {},
			// 关闭红包时触发
			onClose() {},
			// 开启红包时触发
			onCover() {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: '/pages/my/login'
					})
					return;
				}
				// api/user_Vip/distribute

			},
			getDistribute() {
				let that = this

				user.distribute({
					user_id: that.userInfo.id
				}).then(res => {
					console.log(res.code)
					if (res.code === 1) {
						that.money = res.data.amount;
					} else {
						// that.toast(res.msg);
					}
				})
			},
			onSkip(id) {

				// #ifdef APP-PLUS
				plus.runtime.openURL('https://www.yycjkb.cn/dist/#/pages/product/goods?id=' + id)
				// #endif

				// #ifdef H5
				location.href = 'https://www.yycjkb.cn/dist/#/pages/product/goods?id=' + id
				// #endif


				// 
			},
			tonav(index) {

				let nav = '';
				if (index == 1) {
					nav = this.navList.nav1;
				}

				if (index == 2) {
					nav = this.navList.nav2;
				}

				if (index == 3) {
					nav = this.navList.nav3;
				}

				if (index == 4) {
					nav = this.navList.nav4;
				}

				uni.navigateTo({
					url: '/pages/web/index?url=' + Base64.encode(nav)
				})
			},
			async loadNav() {
				api.navList().then(res => {
					if (res.code === 1) {
						this.navList = res.data.navlist;
					} else {
						this.toast(res.msg);
					}
				});
				// https://www.yycjkb.cn/api/wanlshop/product/likes?page=1
				api.likes().then(res => {
					if (res.code === 1) {
						this.goodsList = res.data.data;
					} else {
						this.toast(res.msg);
					}
				})
			},
			async loadIndex() {
				api.index().then(res => {
					if (res.code === 1) {
						this.slides = res.data.list;
					} else {
						this.toast(res.msg);
					}
				});
			},
			async getCateory() {
				let res = await api.cateList()
				if (res.code == 1) {
					this.cateory = res.data.list
				}
			},
			async getTaoke() {
				let res = await api.taokeList()
				if (res.code == 1) {
					this.taokeList = res.data.list
				}
			},
			async getShops(type) {
				var that = this;
				// await this.$store.dispatch('getLocation');
				await uni.getLocation({
					success(result) {
						that.locationRes.latitude = result.latitude // 将纬度存起来
						that.locationRes.longitude = result.longitude // 将经度存起来

						api.shopList({
							page: that.page,
							sortType: that.sortType,
							lng: that.locationRes.longitude,
							lat: that.locationRes.latitude
						}).then(res => {
							if (res.code == 1) {
								if (res.data.list.length <= 0) {
									that.more = 'noMore';
								} else {
									that.more = 'more';
								}
								that.shops = type ? res.data.list : that.shops.concat(res.data.list)
							}
						})

					},
					fail: error => {
						console.log("获取定位失败了", error)
						api.shopList({
							page: that.page,
							sortType: that.sortType,
							lng: 0,
							lat: 0
						}).then(res => {
							if (res.code == 1) {
								if (res.data.list.length <= 0) {
									that.more = 'noMore';
								} else {
									that.more = 'more';
								}
								that.shops = type ? res.data.list : that.shops.concat(res.data
									.list)
							}
						})
					}
				})


			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			switchTab(sortType) {
				this.sortType = sortType;
				this.page = 1;
				this.getShops('change');
			}
		}
	};
</script>


<style lang="scss" scoped>
	.container {
		// background-color: #F97812;
		display: flex;
		flex-direction: column;
		// padding: 20rpx;
		width: 100%;
	}

	.top-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx; // 调整两侧的内边距
	}

	.app-name {
		margin-right: 130px; // 让文本与右边的按钮有自动的距离
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.top-icons {
		display: flex;
		align-items: center;
	}

	.share-button {
		height: 30px;
		line-height: 30px;
		border-radius: 50px;
	}

	.top-section {
		height: 150px;
		background-color: #ff6600;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		/* 为伪元素定位 */
	}

	.top-section::after {
		content: '';
		width: 100%;
		/* 宽度等于父元素宽度 */
		height: 75px;
		/* 高度为父元素高度的一半 */
		background-color: #ff6600;
		/* 与父元素相同的颜色 */
		position: absolute;
		bottom: -75px;
		/* 向下移动一半圆高度 */
		left: 0;
		border-radius: 0 0 100% 100%;
		/* 圆角使底部呈半圆 */
	}


	.search-bar-box {
		display: flex;
		justify-content: center; // 水平居中
		align-items: center; // 垂直居中
		width: 100%; // 确保可以按需扩展
	}


	.search-bar {
		margin-top: 50rpx;
		padding: 45rpx;
		border-radius: 50rpx;
		background-color: #fff;
		width: 320px;
	}

	.banner {
		margin-top: 10px;
		// width:500px;
		height: 350rpx;
		// background-color: #fff;
		// margin: 20rpx 0;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;

		image {
			height: 350rpx;
		}
	}

	.service-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		padding-top: 20px;
		margin-top: 10px;
		background-color: #F97812;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.service-icon {
		width: 130rpx;
		height: 130rpx;
	}

	.recommendation-section {
		// margin: 20rpx 0;
	}

	.recommendation-title image {
		height: 60px;
		width: 100%;
	}

	.recommendation-cards {
		background-color: #F97812;
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.recommendation-card {
		// background-color: #fff;
		// padding: 20rpx;
		// border-radius: 15rpx;
		// text-align: center;
		width: 25%;

		image {
			width: 200px;
			height: 120px;
		}
	}

	.bg-bottom {
		background-color: #F97812;
		padding: 10px;
	}

	.upgrade-section {
		// background-color: #fff5e6;
		// padding: 20rpx;
		// border-radius: 15rpx;
		// margin: 20rpx 0;
		text-align: center;
		// position: relative;

		image {
			height: 120px;
		}
	}



	.free-section {
		// background-color: #fff5e6;
		// padding: 20rpx;
		border-radius: 15rpx;
		// margin: 20rpx 0;
		text-align: center;
		position: relative;

		image {
			height: 60px;
		}
	}

	.partner-section-goods {
		display: flex;
		justify-content: space-between;
		/* 图片列之间保持间隔 */
		align-items: stretch;
		/* 高度拉伸使得对齐 */
	}

	.column {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.left-column {
		flex: 1;

		image {
			width: 100px;
			height: 100px;
		}

		/* 占据相等的空间 */
	}

	.partner-icon {
		width: 100%;
		/* 填满列宽 */
		height: 50%;
		/* 左边图片各占一半的高度 */
	}

	.center-column,
	.right-column {
		flex: 1;

		image {
			width: 100px;
			// height:100px;
		}

		/* 确保中间和右侧列均分空间 */
	}

	.center-column .partner-icon,
	.right-column .partner-icon {
		height: 100%;
		/* 高度填满列 */
	}




	.upgrade-button {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.partner-section {
	    background-color: #F97812;
	    display: flex;
	    flex-wrap: wrap; /* 允许元素换行 */
	    justify-content: flex-start; /* 左对齐，从左开始排列 */
	    margin: 20rpx; /* 控制容器外部的间距 */
	    padding: 15rpx; /* 控制容器内部的间距 */
	    gap: 20rpx; /* 控制元素之间的间距 */
	    height: auto; /* 自动适应内容的高度 */
		border-radius: 20px;
	}
	
	.partner-icon {
	    width: 120rpx;
	    height: 120rpx;
	}



	.online-free-section {
		// background-color: #ffe6cc;
		// padding: 20rpx;
		// border-radius: 15rpx;
		// margin: 20rpx 0;
	}

	.online-title {
		font-size: 26rpx;
		text-align: center;
	}

	.card-grid {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.card {
		// background-color: #fff;
		width: 30%;

		// border-radius: 10rpx;
		image {
			height: 80rpx;
			width: 200rpx;
		}
	}

	.store-list {
		margin-top: 20rpx;

	}

	.store-item {
		background-color: #FBB77A;
		display: flex;
		align-items: center;
		// background-color: #fff;
		color: #FC7130;
		font-weight: 900;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-bottom: 15rpx;
	}

	.store-image {
		background-color: #ffcc80;
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.store-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 25px;
		line-height: 25px;
	}

	.store-info {
		font-size: 24rpx;
	}

	.navigate-button {
		background-color: #ff6600;
		color: #fff;
		border-radius: 10rpx;
		// padding: 5rpx 20rpx;
		height: 30px;
		line-height: 30px;
	}
</style>